<template>
  <div>
    <navigator-menu></navigator-menu>
    <div style="color: white;position: absolute; top: 28vh; left: 15vw;width: 70vw; font-size: 60px; font-weight: 1000;"
         class="wow fadeInLeft" data-wow-duration="1.5s" data-wow-delay="0.05s">
      在这里<br>
      发现更大的世界
    </div>
    <div style="position: absolute; top: 58vh; left: 15vw;width: 70vw" class="wow bounceInUp" data-wow-duration="2.5s"
         data-wow-delay="0.25s">
      <el-autocomplete
          v-model="searchWord"
          :fetch-suggestions="querySearchAsync"
          @select="handleSelect"
          :trigger-on-focus="false"
          placeholder="轻点开启学术之旅"
          :input-style="searchStyle"
          popper-class="popper"
          :suffix-icon="Search"
          @keyup.enter.native="primarySearch"
      >
      </el-autocomplete>
    </div>
    <div style="position: absolute; top: 65vh; left: 35vw;">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-152cbb9b="">
        <path fill="currentColor"
              d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z"></path>
      </svg>
    </div>
    <div style="margin-top: 120vh; height: 100vh">
      <div class="wow bounceInUp" data-wow-duration="2.5s" data-wow-delay="0.15s">
        <h1 style="font-size: 45px;font-weight:1000;text-align: center;">热门文献 &nbsp;&nbsp;&nbsp; 一键直达</h1>
      </div>
      <img :src="clickImg" class="wow bounceInLeft" data-wow-duration="2s" data-wow-delay="0.35s" alt=""
           style="float: left; width: 25vw;margin-top: 12vh; margin-left: 11vw;">
      <div style="margin-top: 12.5vh; padding-right: 9vw" class="wow bounceInRight" data-wow-duration="2s"
           data-wow-delay="0.35s">
        <el-empty :image-size="260" v-if="typeof (hotPapers) == 'undefined' || !hotPapers "></el-empty>
        <el-scrollbar height="53vh" style="" v-else>
          <div v-for="(paper, index) in hotPapers" :key="index">
            <div style="float: right; width: 45vw;margin-top: 1.25vh; margin-right: 5vw;"
                 @click="showPaperDetail(paper.id)">
              <el-card style="margin:1.25vh auto; border-radius:20px;">
                <h2>

                    <span v-html="paper.title.slice(0,40)+'...'"
                          v-if="paper.title.length>40"
                          style="height: 2.5vw; overflow: hidden"></span>
                  <span
                      v-else v-html="paper.title"></span>
                </h2>
                <h5>
                  <!-- 学术成果类型 -->
                  <span v-if="paper.doc_type=='book'" style="margin-right:10px; color: #b9b9b9">[会议记录]</span> <span
                    v-else
                    style="margin-right:10px;">[期刊论文]</span>
                  <!-- 学术成果作者，最多展示3位 -->
                  <span v-for="(author, index) in paper.authors" :key="index">
            <router-link to="/info" v-if="index<3" style="margin-right:8px; color:blue;">{{ author.name }}</router-link>
          </span> <span v-if="paper.authors.length>3" style="margin-right:8px;">等</span>
                  <!-- 学术成果出版源 -->
                  <span v-if="paper.venue"><span style="margin-right:10px;"> -{{
                      paper.venue.raw
                    }}</span><span style="text-overflow: ellipsis">{{ paper.year }}年{{ paper.volume }}期{{
                      paper.issue
                    }}卷</span></span>
                </h5>
                <!-- 摘要 -->
                <h5>摘要：<span v-if="paper.abstract.length>90" v-html="paper.abstract.slice(0,90)+'...'"></span> <span
                    v-else v-html="paper.abstract"></span></h5>
                <!-- 关键词 -->
                <h5><span v-for="(keyword, index) in paper.keywords" :key="index"><router-link to="/paperDetail"
                                                                                               style="margin-right:10px;">
                  <span v-if="index < 4"
                        v-html="keyword"></span></router-link></span></h5>
                <span>领域：</span>
                <span v-for="(fieldItem, index) in paper.field" :key="index">
            <span v-if="index<=5" style="margin-right:20px; "> <el-tag> {{ printField(fieldItem) }}</el-tag></span>
        </span> <span v-if="paper.field.length>5" style="margin-right:5px;">等</span>

              </el-card>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <div style="margin-top: 10vh; height: 100vh">
      <div class="wow bounceInUp" data-wow-duration="2.5s" data-wow-delay="0.15s">
        <h1 style="font-size: 45px;font-weight:1000;text-align: center;">热门领域 &nbsp;&nbsp;&nbsp; 包罗万象</h1>
      </div>
      <div style="display: inline-block; width: 35vw; margin-top: 15vh; margin-left: 15vw" class="wow bounceInLeft"
           data-wow-duration="2s" data-wow-delay="0.35s">
        <!--        <div style="margin-bottom: 3vh;font-size: 35px; font-weight: 800">-->
        <!--          在这里寻得所爱。-->
        <!--        </div>-->
        <el-button type="button" v-for="(field, index) in fields" class="btn btn-outline-primary"
                   @click="routerToField(field)"
                   style="margin: 0.5vw; font-size:25px;">
          {{ toField(field) }}
        </el-button>
        <el-button style="margin: 0.5vw; font-size:25px;">更多...</el-button>
      </div>
      <img :src="hotPaperImg2" class="wow bounceInRight" alt=""
           style="float: right; width: 25vw;margin-top: 12vh; margin-right: 11vw;">
    </div>
    <div style="margin-top: 10vh; height: 100vh">
      <div class="wow bounceInUp" data-wow-duration="2.5s" data-wow-delay="0.15s">
        <h1 style="font-size: 45px;font-weight:1000;text-align: center;">热门学者 &nbsp;&nbsp;&nbsp; 助力科研 </h1>

        <div style="float: left;">
          <el-card shadow="always" style="width: 40vw; margin-left: 11vw; margin-top: 15vh; height:45vh ">
            <template #header>
              <div class="card-header">
                <span>热门学者</span>
                <!--                <el-button class="button" type="text" @click="" style="float: right">查看更多</el-button>-->
              </div>
            </template>
            <!--            <el-descriptions
                            :column="3"
                            border
                            style="width: 36vw;margin: 2vh auto;" v-for="(scholar, index) in scholars"
                        >
                          {{index+1}}
                          <el-descriptions-item>
                            <template #label>
                              <el-icon>
                                <user/>
                              </el-icon>
                              姓名
                            </template>
                            {{ scholar.name }}
                          </el-descriptions-item>
                          <el-descriptions-item>
                            <template #label>
                              <el-icon>
                                <location/>
                              </el-icon>
                              机构
                            </template>
                            {{ scholar.affi }}
                          </el-descriptions-item>
                          <el-descriptions-item>
                            <template #label>
                              <el-icon>
                                <tickets/>
                              </el-icon>
                              领域
                            </template>
                            <el-tag size="small">{{ scholar.field }}</el-tag>
                          </el-descriptions-item>
                          <el-button type="primary" size="small">关注</el-button>
                        </el-descriptions>-->
            <el-scrollbar height="45vh" style="">

              <div v-for="(scholar, index) in scholars" style="margin: 2vw">
                <span style="font-size: 18px; font-weight: 850; margin-right: 2vw;">{{ index + 1 }} <el-icon><user/></el-icon> {{
                    scholar.name
                  }}</span>
                <el-tag style="margin-right: 1vw;">{{ scholar.field }}</el-tag>
                <span style="margin-right: 1vw;"> <el-icon><office-building/></el-icon> {{ scholar.affi }}</span>
                <span style="margin-right: 1vw;"> <el-icon><histogram/></el-icon> {{ scholar.hotIndex }}</span>
                <el-button type="text" style="float: right; margin-right: 0.2vw; margin-bottom: 0.3vw;"
                           @click="follow(scholar.id)">
                  了解更多
                </el-button>
              </div>

            </el-scrollbar>

          </el-card>
          <!--          <div id="authorChart" style="width: 30vw;height: 30vw;margin-left: 11vw;margin-top: 8vh">-->

          <!--          </div>-->
        </div>
      </div>
      <img :src="social" class="wow bounceInLeft" data-wow-duration="2s" data-wow-delay="0.35s" alt=""
           style="float: right; width: 25vw;margin-top: 12vh; margin-right: 11vw;">
    </div>
    <div style="margin-top: 10vh;height: 100vh">
      <div class="wow bounceInUp" data-wow-duration="2.5s" data-wow-delay="0.15s">
        <h1 style="font-size: 45px;font-weight:1000;text-align: center;">高级搜索 &nbsp;&nbsp;&nbsp; 无限可能 </h1>
      </div>
      <img :src="SearchImg" alt=""
           style="float: left; width: 25vw; margin-top: 12vh; margin-left: 11vw; margin-right: 8vw"
           class="wow bounceInLeft">
      <div style="" class="wow bounceInRight" data-wow-duration="2s" data-wow-delay="0.35s">
        <adv-search></adv-search>
      </div>
    </div>


    <!--        <el-tabs v-model="activeName" @tab-click="" style="">
              <el-tab-pane label="热门论文" name="first">
              </el-tab-pane>
              <el-tab-pane label="高级搜索" name="second">

              </el-tab-pane>
              <el-tab-pane label="社交聊天" name="third">

              </el-tab-pane>
              <el-tab-pane label="经典论文" name="fourth">

              </el-tab-pane>
            </el-tabs>

            <div style="width:100vw ;height: 100vh; position:absolute; top: 240vh; overflow: hidden">
              <img :src="cover2" alt="" style="width: 100vw; z-index: 0">
            </div>

            <div
                style="font-size: 95px; text-align: right; color: floralwhite; font-family: 'Script MT Bold',sans-serif; position: absolute; z-index: 30; top: 285vh; right: 5vw">
            </div>-->
    <el-backtop class="wow bounceInRight"/>
  </div>
</template>
<script>

import NavigatorMenu from "../components/NavigatorMenu";
import NavigatorMenuMobile from "../components/NavigatorMenuMobile";
import papercard from "../assets/css/paper-card.css"
import WOW from "wow.js";
import {onMounted, ref} from "vue";
import {Edit} from '@element-plus/icons'
import router from "../router";
import AdvSearch from "../components/AdvSearch";
import axios from "axios";
import * as echarts from 'echarts';
import {
  User,
  Iphone,
  Location,
  Tickets,
  OfficeBuilding,
} from '@element-plus/icons-vue'

export default {
  name: "Cover",
  components: {
    AdvSearch,
    NavigatorMenuMobile,
    NavigatorMenu,
    Edit,
    Swiper
  },

  data() {
    return {
      cover: require('../assets/images/apple.jpg'),
      cover2: require('../assets/images/macro1.jpg'),
      baseurl: 'http://124.70.184.145:39245',
      inputSearch: '',
      suggestions: [],
      searchWord: '',
      timeout: null,
      searchStyle: 'font-size:23px; height: 10.5vh;border-radius: 35px; width: 70vw;',
      activeName: 'first',
      Search: require("@element-plus/icons/lib/Search"),
      SearchImg: require('../assets/images/research.png'),
      SearchImg1: require('../assets/images/research1.png'),
      social: require('../assets/images/social.png'),
      clickImg: require('../assets/images/clickimg.png'),
      hotPaperImg1: require('../assets/images/hotpaper.jpg'),
      hotPaperImg2: require('../assets/images/hotpaper1.png'),
      hotPapers: undefined,
      scholars: [],
      fields: [],
      category_map: [
        {
          label: '医学',
          key: 'medical'
        },
        {
          label: '信息学',
          key: 'info'
        },
        {
          label: '经济学',
          key: 'eco'
        },
        {
          label: '天体物理学',
          key: 'astro-ph'
        },
        {
          label: '宇宙学与非星系天体物理学',
          key: 'astro-ph.CO'
        },
        {
          label: '地球与行星天体物理学',
          key: 'astro-ph.EP'
        },
        {
          label: '星系天体物理学',
          key: 'astro-ph.GA'
        },
        {
          label: '高能天体物理现象学',
          key: 'astro-ph.HE'
        },
        {
          label: '天体物理学的仪器和方法',
          key: 'astro-ph.IM'
        },
        {
          label: '太阳和恒星天体物理学',
          key: 'astro-ph.SR'
        },
        {
          label: '无序系统与神经网络',
          key: 'cond-mat.dis-nn'
        },
        {
          label: '中尺度和纳米级物理',
          key: 'cond-mat.mes-hall'
        },
        {
          label: '材料科学',
          key: 'cond-mat.mtrl-sci'
        },
        {
          label: '其他凝聚态物质',
          key: 'cond-mat.other'
        },
        {
          label: '量子气体',
          key: 'cond-mat.quant-gas'
        },
        {
          label: '软凝聚态物质',
          key: 'cond-mat.soft'
        },
        {
          label: '统计力学',
          key: 'cond-mat.stat-mech'
        },
        {
          label: '电子波函数',
          key: 'cond-mat.str-el'
        },
        {
          label: '超导电性',
          key: 'cond-mat.supr-con'
        },
        {
          label: '人工智能',
          key: 'cs.AI'
        },
        {
          label: '硬件架构',
          key: 'cs.AR'
        },
        {
          label: '计算复杂性',
          key: 'cs.CC'
        },
        {
          label: '计算工程、金融和科学',
          key: 'cs.CE'
        },
        {
          label: '计算几何',
          key: 'cs.CG'
        },
        {
          label: '计算和语言',
          key: 'cs.CL'
        },
        {
          label: '加密与安全',
          key: 'cs.CR'
        },
        {
          label: '计算机视觉和模式识别',
          key: 'cs.CV'
        },
        {
          label: '计算机与社会',
          key: 'cs.CY'
        },
        {
          label: '数据库',
          key: 'cs.DB'
        },
        {
          label: '分布式、并行和集群计算',
          key: 'cs.DC'
        },
        {
          label: '数字图书馆',
          key: 'cs.DL'
        },
        {
          label: '离散数学',
          key: 'cs.DM'
        },
        {
          label: '数据结构和算法',
          key: 'cs.DS'
        },
        {
          label: '新兴技术',
          key: 'cs.ET'
        },
        {
          label: '形式语言与自动机理论',
          key: 'cs.FL'
        },
        {
          label: '一般文献',
          key: 'cs.GL'
        },
        {
          label: '制图学',
          key: 'cs.GR'
        },
        {
          label: '计算机科学与博弈论',
          key: 'cs.GT'
        },
        {
          label: '人机交互',
          key: 'cs.HC'
        },
        {
          label: '信息检索',
          key: 'cs.IR'
        },
        {
          label: '信息论',
          key: 'cs.IT'
        },
        {
          label: '机器学习',
          key: 'cs.LG'
        },
        {
          label: '计算机科学中的逻辑',
          key: 'cs.LO'
        },
        {
          label: '多智能体系统 ',
          key: 'cs.MA'
        },
        {
          label: '多媒体',
          key: 'cs.MM'
        },
        {
          label: '数学软件',
          key: 'cs.MS'
        },
        {
          label: '数值分析',
          key: 'cs.NA'
        },
        {
          label: '神经与进化计算',
          key: 'cs.NE'
        },
        {
          label: '网络与互联网架构',
          key: 'cs.NI'
        },
        {
          label: '其他计算机科学',
          key: 'cs.OH'
        },
        {
          label: '操作系统',
          key: 'cs.OS'
        },
        {
          label: '性能',
          key: 'cs.PF'
        },
        {
          label: '编程语言',
          key: 'cs.PL'
        },
        {
          label: '机器人学',
          key: 'cs.RO'
        },
        {
          label: '符号计算',
          key: 'cs.SC'
        },
        {
          label: '响应',
          key: 'cs.SD'
        },
        {
          label: '软件工程',
          key: 'cs.SE'
        },
        {
          label: '社会与信息网络',
          key: 'cs.SI'
        },
        {
          label: '系统控制',
          key: 'cs.SY'
        },
        {
          label: '经济计量学',
          key: 'econ.EM'
        },
        {
          label: '语音与音频处理',
          key: 'eess.AS'
        },
        {
          label: '图像与视频处理',
          key: 'eess.IV'
        },
        {
          label: '信号处理',
          key: 'eess.SP'
        },
        {
          label: '广义相对论和量子宇宙学',
          key: 'gr-qc'
        },
        {
          label: '高能物理-实验',
          key: 'hep-ex'
        },
        {
          label: '高能物理-晶格',
          key: 'hep-lat'
        },
        {
          label: '高能物理-现象学',
          key: 'hep-ph'
        },
        {
          label: '高能物理-理论',
          key: 'hep-th'
        },
        {
          label: '交换代数',
          key: 'math.AC'
        },
        {
          label: '代数几何',
          key: 'math.AG'
        },
        {
          label: '项目态势评估分析',
          key: 'math.AP'
        },
        {
          label: '代数拓扑',
          key: 'math.AT'
        },
        {
          label: '经典分析与常微分方程',
          key: 'math.CA'
        },
        {
          label: '组合学',
          key: 'math.CO'
        },
        {
          label: '电子理论',
          key: 'math.CT'
        },
        {
          label: '复杂变量',
          key: 'math.CV'
        },
        {
          label: '微分几何',
          key: 'math.DG'
        },
        {
          label: '动态系统',
          key: 'math.DS'
        },
        {
          label: '泛函分析',
          key: 'math.FA'
        },
        {
          label: '普通数学',
          key: 'math.GM'
        },
        {
          label: '一般拓扑学',
          key: 'math.GN'
        },
        {
          label: '群论',
          key: 'math.GR'
        },
        {
          label: '几何拓扑学',
          key: 'math.GT'
        },
        {
          label: '历史和概述',
          key: 'math.HO'
        },
        {
          label: '信息论',
          key: 'math.IT'
        },
        {
          label: 'K理论与同源性',
          key: 'math.KT'
        },
        {
          label: 'K理论与同源性',
          key: 'math.KT'
        },
        {
          label: '逻辑学',
          key: 'math.LO'
        },
        {
          label: '几何度量学',
          key: 'math.MG'
        },
        {
          label: '数学物理',
          key: 'math.MP'
        },
        {
          label: '数值分析',
          key: 'math.NA'
        },
        {
          label: '数论',
          key: 'math.NT'
        },
        {
          label: '运算符代数',
          key: 'math.OA'
        },
        {
          label: '最优化及控制',
          key: 'math.OC'
        },
        {
          label: '概率',
          key: 'math.PR'
        },
        {
          label: '量子代数',
          key: 'math.QA'
        },
        {
          label: '环与代数',
          key: 'math.RA'
        },
        {
          label: '表示论',
          key: 'math.RT'
        },
        {
          label: '辛几何',
          key: 'math.SG'
        },
        {
          label: '光谱理论',
          key: 'math.SP'
        },
        {
          label: '统计理论',
          key: 'math.ST'
        },
        {
          label: '数学物理',
          key: 'math-ph'
        },
        {
          label: '适应和自组织系统',
          key: 'nlin.AO'
        },
        {
          label: '混沌动力学',
          key: 'nlin.CD'
        },
        {
          label: '细胞自动机和晶格气体',
          key: 'nlin.CG'
        },
        {
          label: '模式形成与孤子',
          key: 'nlin.PS'
        },
        {
          label: '完全可解和可积的系统',
          key: 'nlin.SI'
        },
        {
          label: '核实验',
          key: 'nucl-ex'
        },
        {
          label: '核理论',
          key: 'nucl-th'
        },
        {
          label: '加速器物理',
          key: 'physics.acc-ph'
        },
        {
          label: '大气和海洋物理学',
          key: 'physics.ao-ph'
        },
        {
          label: '应用物理学',
          key: 'physics.app-ph'
        },
        {
          label: '原子簇和分子簇',
          key: 'physics.atm-clus'
        },
        {
          label: '原子物理学',
          key: 'physics.atom-ph'
        },
        {
          label: '生物物理学',
          key: 'physics.bio-ph'
        },
        {
          label: '化学物理学',
          key: 'physics.chem-ph'
        },
        {
          label: '经典物理学',
          key: 'physics.class-ph'
        },
        {
          label: '计算物理学',
          key: 'physics.comp-ph'
        },
        {
          label: '数据分析、统计与概率',
          key: 'physics.data-an'
        },
        {
          label: '物理教育',
          key: 'physics.ed-ph'
        },
        {
          label: '流体力学',
          key: 'physics.flu-dyn'
        },
        {
          label: '普通物理',
          key: 'physics.gen-ph'
        },
        {
          label: '地球物理学',
          key: 'physics.geo-ph'
        },
        {
          label: '物理学史和哲学',
          key: 'physics.hist-ph'
        },
        {
          label: '仪器仪表和探测器',
          key: 'physics.ins-det'
        },
        {
          label: '医学物理',
          key: 'physics.med-ph'
        },
        {
          label: '光学',
          key: 'physics.optics'
        },
        {
          label: '等离子物理',
          key: 'physics.plasm-ph'
        },
        {
          label: '热门物理',
          key: 'physics.pop-ph'
        },
        {
          label: '物理学与社会',
          key: 'physics.soc-ph'
        },
        {
          label: '空间物理',
          key: 'physics.space-ph'
        },
        {
          label: '生物分子',
          key: 'q-bio.BM'
        },
        {
          label: '细胞行为',
          key: 'q-bio.CB'
        },
        {
          label: '基因组学',
          key: 'q-bio.GN'
        },
        {
          label: '分子网络',
          key: 'q-bio.MN'
        },
        {
          label: '神经元和认知',
          key: 'q-bio.NC'
        },
        {
          label: '其他定量生物学',
          key: 'q-bio.OT'
        },
        {
          label: '种群与进化',
          key: 'q-bio.PE'
        },
        {
          label: '定量方法',
          key: 'q-bio.QM'
        },
        {
          label: '亚细胞过程',
          key: 'q-bio.SC'
        },
        {
          label: '组织和器官',
          key: 'q-bio.TO'
        },
        {
          label: '计算金融学',
          key: 'q-fin.CP'
        },
        {
          label: '经济学',
          key: 'q-fin.EC'
        },
        {
          label: '一般金融',
          key: 'q-fin.GN'
        },
        {
          label: '数理金融学',
          key: 'q-fin.MF'
        },
        {
          label: '投资组合管理',
          key: 'q-fin.PM'
        },
        {
          label: '证券定价',
          key: 'q-fin.PR'
        },
        {
          label: '风险管理',
          key: 'q-fin.RM'
        },
        {
          label: '统计金融',
          key: 'q-fin.ST'
        },
        {
          label: '交易和市场微观结构',
          key: 'q-fin.TR'
        },
        {
          label: '量子物理',
          key: 'quant-ph'
        },
        {
          label: '应用软件',
          key: 'stat.AP'
        },
        {
          label: '计算',
          key: 'stat.CO'
        },
        {
          label: '方法论',
          key: 'stat.ME'
        },
        {
          label: '机器学习',
          key: 'stat.ML'
        },
        {
          label: '计算',
          key: 'stat.CO'
        },
        {
          label: '方法论',
          key: 'stat.ME'
        },
        {
          label: '机器学习',
          key: 'stat.ML'
        },
        {
          label: '其他统计数据',
          key: 'stat.OT'
        },
        {
          label: '统计理论',
          key: 'stat.TH'
        },
      ],
      imageUrl: '',
    }
  },
  methods: {
    loadAll() {
      return [
        {value: 'A fast learning algorithm for deep belief nets', link: 'https://github.com/vuejs/vue'},
        {value: 'Authenticating Query Results in Edge Computing', link: 'https://github.com/ElemeFE/element'},
        {value: 'A Survey on Edge Computing Systems and Tools', link: 'https://github.com/ElemeFE/cooking'},
        {value: 'Enhancing Edge Computing with Database Replication', link: 'https://github.com/ElemeFE/mint-ui'},
        {value: 'Priority-based Fair Scheduling in Edge Computing', link: 'https://github.com/vuejs/vuex'},
        {
          value: 'Wireless Edge Computing with Latency and Reliability Guarantees',
        },
        {
          value: 'Poster: ParkMaster: Leveraging Edge Computing in Visual Analytics',
        },
      ];
    },
    follow(id) {
      this.$router.push({path: '/MyPage', query: {userId: id, userIdIn: sessionStorage.getItem('id')}});
    },
    showPaperDetail(id) {
      sessionStorage.setItem('paperId', id)
      // var queryParams
      // queryParams={id:id,paperId:id};
      // sessionStorage.setItem('queryParam',JSON.stringify(queryParams))
      router.push(
          {
            path: '/paperDetail',
            name: 'PaperDetail',
          })
    },
    routerToField(field) {
      const Parameters = {
        conditions: [
          {
            key: 'field.keyword',
            option: 1,
            page: 1,
            size: 20,
            value: field,
          }
        ],
        paperFilter: {
          canGet: false,
          highSite: false,
          hot: false,
        },
        sort: 1,
        year: {
          l: 1950,
          r: 2021,
        }
      }
      router.push(
          {
            path: '/searchResult',
            name: 'SearchResult',
            params: {
              fromCategory: true,
              Parameters: JSON.stringify(Parameters)
            }
          })
      ;
      sessionStorage.setItem('hotField', field)
    },
    querySearchAsync(queryString, cb) {
      console.log(this.searchWord)
      axios({
        method: 'post',
        url: '/api/paper/suggest',
        data: {
          prefix: this.searchWord,
          size: 6
        }
      }).then(response => {
        console.log(response)
        if (response.data.code == 200) {
          this.suggestions = response.data.data.title
          var suggestions = this.suggestions;
          suggestions = this.suggestions.map(item => {
            return {
              value: item,
            }
          });
          console.log(suggestions)
          cb(suggestions)
        } else {
          console.log(response.data.msg)
          this.$message({
            message: response.data.msg,
            type: 'warning'
          })
        }
      })

    }
    ,
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    printField(key) {
      for (let i = 0; i < this.category_map.length; i++) {
        if (key == this.category_map[i].key) {
          return this.category_map[i].label
        }
      }
      return '其他'
    },
    handleSelect(item) {
      console.log(item);
    }
    ,
    primarySearch() {
      console.log('search!')
      console.log(this.searchWord)
      var filter = 'all'
      sessionStorage.removeItem('hotField')
      sessionStorage.setItem("hotField", filter)
      router.push(
          {
            path: '/searchResult',
            query: {
              value: this.searchWord
            }
          }
      )
    }
    ,
    toField(key) {
      for (let i = 0; i < this.category_map.length; i++) {
        if (key == this.category_map[i].key) {
          return this.category_map[i].label
        }
      }
      return '其他'
    }
    ,
    echartinit() {
      var chartDom = document.getElementById('authorChart');
      var myChart = echarts.init(chartDom);
      const dataBJ = [
        [1, 55, 9, 56, 0.46, 18, 6, '良'],
        [2, 25, 11, 21, 0.65, 34, 9, '优'],
        [3, 56, 7, 63, 0.3, 14, 5, '良'],
        [4, 33, 7, 29, 0.33, 16, 6, '优'],
        [5, 42, 24, 44, 0.76, 40, 16, '优'],
        [6, 82, 58, 90, 1.77, 68, 33, '良'],
        [7, 74, 49, 77, 1.46, 48, 27, '良'],
        [8, 78, 55, 80, 1.29, 59, 29, '良'],
        [9, 267, 216, 280, 4.8, 108, 64, '重度污染'],
        [10, 185, 127, 216, 2.52, 61, 27, '中度污染'],
        [11, 39, 19, 38, 0.57, 31, 15, '优'],
        [12, 41, 11, 40, 0.43, 21, 7, '优'],
        [13, 64, 38, 74, 1.04, 46, 22, '良'],
        [14, 108, 79, 120, 1.7, 75, 41, '轻度污染'],
        [15, 108, 63, 116, 1.48, 44, 26, '轻度污染'],
        [16, 33, 6, 29, 0.34, 13, 5, '优'],
        [17, 94, 66, 110, 1.54, 62, 31, '良'],
        [18, 186, 142, 192, 3.88, 93, 79, '中度污染'],
        [19, 57, 31, 54, 0.96, 32, 14, '良'],
        [20, 22, 8, 17, 0.48, 23, 10, '优'],
        [21, 39, 15, 36, 0.61, 29, 13, '优'],
        [22, 94, 69, 114, 2.08, 73, 39, '良'],
        [23, 99, 73, 110, 2.43, 76, 48, '良'],
        [24, 31, 12, 30, 0.5, 32, 16, '优'],
        [25, 42, 27, 43, 1, 53, 22, '优'],
        [26, 154, 117, 157, 3.05, 92, 58, '中度污染'],
        [27, 234, 185, 230, 4.09, 123, 69, '重度污染'],
        [28, 160, 120, 186, 2.77, 91, 50, '中度污染'],
        [29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],
        [30, 52, 24, 60, 1.03, 50, 21, '良'],
        [31, 46, 5, 49, 0.28, 10, 6, '优']
      ];
      const dataGZ = [
        [1, 26, 37, 27, 1.163, 27, 13, '优'],
        [2, 85, 62, 71, 1.195, 60, 8, '良'],
        [3, 78, 38, 74, 1.363, 37, 7, '良'],
        [4, 21, 21, 36, 0.634, 40, 9, '优'],
        [5, 41, 42, 46, 0.915, 81, 13, '优'],
        [6, 56, 52, 69, 1.067, 92, 16, '良'],
        [7, 64, 30, 28, 0.924, 51, 2, '良'],
        [8, 55, 48, 74, 1.236, 75, 26, '良'],
        [9, 76, 85, 113, 1.237, 114, 27, '良'],
        [10, 91, 81, 104, 1.041, 56, 40, '良'],
        [11, 84, 39, 60, 0.964, 25, 11, '良'],
        [12, 64, 51, 101, 0.862, 58, 23, '良'],
        [13, 70, 69, 120, 1.198, 65, 36, '良'],
        [14, 77, 105, 178, 2.549, 64, 16, '良'],
        [15, 109, 68, 87, 0.996, 74, 29, '轻度污染'],
        [16, 73, 68, 97, 0.905, 51, 34, '良'],
        [17, 54, 27, 47, 0.592, 53, 12, '良'],
        [18, 51, 61, 97, 0.811, 65, 19, '良'],
        [19, 91, 71, 121, 1.374, 43, 18, '良'],
        [20, 73, 102, 182, 2.787, 44, 19, '良'],
        [21, 73, 50, 76, 0.717, 31, 20, '良'],
        [22, 84, 94, 140, 2.238, 68, 18, '良'],
        [23, 93, 77, 104, 1.165, 53, 7, '良'],
        [24, 99, 130, 227, 3.97, 55, 15, '良'],
        [25, 146, 84, 139, 1.094, 40, 17, '轻度污染'],
        [26, 113, 108, 137, 1.481, 48, 15, '轻度污染'],
        [27, 81, 48, 62, 1.619, 26, 3, '良'],
        [28, 56, 48, 68, 1.336, 37, 9, '良'],
        [29, 82, 92, 174, 3.29, 0, 13, '良'],
        [30, 106, 116, 188, 3.628, 101, 16, '轻度污染'],
        [31, 118, 50, 0, 1.383, 76, 11, '轻度污染']
      ];
      const dataSH = [
        [1, 91, 45, 125, 0.82, 34, 23, '良'],
        [2, 65, 27, 78, 0.86, 45, 29, '良'],
        [3, 83, 60, 84, 1.09, 73, 27, '良'],
        [4, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
        [5, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
        [6, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
        [7, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
        [8, 89, 65, 78, 0.86, 51, 26, '良'],
        [9, 53, 33, 47, 0.64, 50, 17, '良'],
        [10, 80, 55, 80, 1.01, 75, 24, '良'],
        [11, 117, 81, 124, 1.03, 45, 24, '轻度污染'],
        [12, 99, 71, 142, 1.1, 62, 42, '良'],
        [13, 95, 69, 130, 1.28, 74, 50, '良'],
        [14, 116, 87, 131, 1.47, 84, 40, '轻度污染'],
        [15, 108, 80, 121, 1.3, 85, 37, '轻度污染'],
        [16, 134, 83, 167, 1.16, 57, 43, '轻度污染'],
        [17, 79, 43, 107, 1.05, 59, 37, '良'],
        [18, 71, 46, 89, 0.86, 64, 25, '良'],
        [19, 97, 71, 113, 1.17, 88, 31, '良'],
        [20, 84, 57, 91, 0.85, 55, 31, '良'],
        [21, 87, 63, 101, 0.9, 56, 41, '良'],
        [22, 104, 77, 119, 1.09, 73, 48, '轻度污染'],
        [23, 87, 62, 100, 1, 72, 28, '良'],
        [24, 168, 128, 172, 1.49, 97, 56, '中度污染'],
        [25, 65, 45, 51, 0.74, 39, 17, '良'],
        [26, 39, 24, 38, 0.61, 47, 17, '优'],
        [27, 39, 24, 39, 0.59, 50, 19, '优'],
        [28, 93, 68, 96, 1.05, 79, 29, '良'],
        [29, 188, 143, 197, 1.66, 99, 51, '中度污染'],
        [30, 174, 131, 174, 1.55, 108, 50, '中度污染'],
        [31, 187, 143, 201, 1.39, 89, 53, '中度污染']
      ];
      const schema = [
        {name: 'date', index: 0, text: '号'},
        {name: 'AQIindex', index: 1, text: 'H指数'},
        {name: 'PM25', index: 2, text: '被引量'},
        {name: 'PM10', index: 3, text: '领域热度'},
        {name: 'CO', index: 4, text: '影响力'},
        {name: 'NO2', index: 5, text: '论文因子'},
        {name: 'SO2', index: 6, text: '论文量'}
      ];
      const itemStyle = {
        opacity: 0.8,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0,0,0,0.3)'
      };
      const option = {
        color: ['#dd4444', '#fec42c', '#80F1BE'],
        legend: {
          top: 10,
          data: ['院士', '长江', '杰青'],
          textStyle: {
            fontSize: 16
          }
        },
        grid: {
          left: '10%',
          right: 150,
          top: '18%',
          bottom: '10%'
        },
        tooltip: {
          backgroundColor: 'rgba(255,255,255,0.7)',
          formatter: function (param) {
            var value = param.value;
            // prettier-ignore
            return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                + param.seriesName + ' ' + value[0] + '日：'
                + value[7]
                + '</div>'
                + schema[1].text + '：' + value[1] + '<br>'
                + schema[2].text + '：' + value[2] + '<br>'
                + schema[3].text + '：' + value[3] + '<br>'
                + schema[4].text + '：' + value[4] + '<br>'
                + schema[5].text + '：' + value[5] + '<br>'
                + schema[6].text + '：' + value[6] + '<br>';
          }
        },
        xAxis: {
          type: 'value',
          name: '论文量',
          nameGap: 16,
          nameTextStyle: {
            fontSize: 16
          },
          max: 31,
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          name: 'H指数',
          nameLocation: 'end',
          nameGap: 20,
          nameTextStyle: {
            fontSize: 16
          },
          splitLine: {
            show: false
          }
        },
        visualMap: [
          {
            left: 'right',
            top: '10%',
            dimension: 6,
            min: 0,
            max: 250,
            itemWidth: 30,
            itemHeight: 120,
            calculable: true,
            precision: 0.1,
            text: ['圆形大小：被引数'],
            textGap: 30,
            inRange: {
              symbolSize: [10, 70]
            },
            outOfRange: {
              symbolSize: [10, 70],
              color: ['rgba(255,255,255,0.4)']
            },
            controller: {
              inRange: {
                color: ['#c23531']
              },
              outOfRange: {
                color: ['#999']
              }
            }
          },
          {
            left: 'right',
            bottom: '5%',
            dimension: 6,
            min: 0,
            max: 50,
            itemHeight: 120,
            calculable: true,
            precision: 0.1,
            text: ['明暗：领域热度'],
            textGap: 30,
            inRange: {
              colorLightness: [0.9, 0.5]
            },
            outOfRange: {
              color: ['rgba(255,255,255,0.4)']
            },
            controller: {
              inRange: {
                color: ['#c23531']
              },
              outOfRange: {
                color: ['#999']
              }
            }
          }
        ],
        series: [
          {
            name: '院士',
            type: 'scatter',
            itemStyle: itemStyle,
            data: dataBJ
          },
          {
            name: '长江',
            type: 'scatter',
            itemStyle: itemStyle,
            data: dataSH
          },
          {
            name: '杰青',
            type: 'scatter',
            itemStyle: itemStyle,
            data: dataGZ
          }
        ]
      };

      option && myChart.setOption(option);
    }
  },
  created() {
    axios({
      method: 'get',
      url: '/api/hotIndex',
    }).then(response => {
      console.log(response)
      if (response.data.code == 200) {
        this.hotPapers = response.data.data.papers
        this.scholars = response.data.data.scholars
        this.fields = response.data.data.fields
        console.log(this.hotPapers)
        console.log(this.scholars)
        console.log(this.fields)
      } else {
        console.log(response.msg)
        this.$message({
          message: '请检查网络情况',
          type: 'warning'
        })
      }
    })
  },
  mounted() {

    // this.suggestions = this.loadAll();
    var swiper = new Swiper(".swiper-container", {
      effect: "coverflow",
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: "auto",
      coverflowEffect: {
        rotate: 0, //把旋转角度改为0度
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
      },
      loop: true,
    });
    const wow = new WOW({
      boxClass: "wow", // animated element css class (default is wow)
      animateClass: "animated", // animation css class (default is animated)
      offset: 0, // distance to the element when triggering the animation (default is 0)
      mobile: true, // trigger animations on mobile devices (default is true)
      live: true, // act on asynchronously loaded content (default is true)
      callback: function (box) {
        // the callback is fired every time an animation is started
        // the argument that is passed in is the DOM node being animated
      },
      scrollContainer: null, // optional scroll container selector, otherwise use window,
      resetAnimation: true, // reset animation on end (default is true)
    });
    wow.init();
    // this.echartinit();
  },


}
</script>

<style scoped>
html {
  padding: 0;
  margin: 0;
}

body {
  padding: 0;
  margin: 0;
  background: url("../assets/images/apple.jpg") no-repeat;
  background-size: cover;
}

.search {
  position: fixed;
  margin: 50vh 18vw;
  width: 80vw;
  top: 52vh;
  font-size: 8vh;
}

button {
  display: inline-block;
}
</style>
<style>
.popper {
  margin-left: 15vw;
}

</style>
